<template>
  <div>
    <div v-show="!isDetail" class="page-index">
      <div class="page-search">
        <el-form inline>
          <el-form-item label="组织名称">
            <ClassifyTreeSelect
              @input="getBranchId"
              @getValue="getBranchNode"
              :value="queryParams.partyOrgId"
              size="mini"
            />
          </el-form-item>
          <el-form-item label="年份">
            <el-date-picker
              v-model="queryParams.year"
              type="year"
              size="mini"
              placeholder="请选择"
            />
          </el-form-item>
          <el-form-item label="月份">
            <el-select clearable v-model="queryParams.startMonth" size="mini" placeholder="请选择">
              <el-option
                v-for="(item,index) in monthList"
                :key="index"
                :label="item"
                :value="index+1"
              />
            </el-select> -
            <el-select clearable v-model="queryParams.endMonth" size="mini" placeholder="请选择">
              <el-option
                v-for="(item,index) in monthList"
                :key="index"
                :label="item"
                :value="index+1"
              />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button size="mini" type="primary" @click="search">搜索</el-button>
            <el-button size="mini" @click="reset">重置</el-button>
          </el-form-item>
        </el-form>
        <el-form inline>
          <el-form-item>
            <el-button size="mini" type="primary" @click="openAdd">新增</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="page-body">
        <div class="table-box">
          <el-table
            :data="tableData"
            height="100%"
          >
            <el-table-column type="index" label="序号" align="center" width="50" />
            <el-table-column prop="partyOrgName" label="组织名称" align="center" min-width="150" />
            <el-table-column prop="year" label="年份" align="center" width="120" />
            <el-table-column prop="month" label="月份" align="center" width="150" />
            <el-table-column label="操作" align="center" width="120">
              <template slot-scope="scope">
                <el-button
                  type="text"
                  size="mini"
                  @click="openDetail(scope.row)"
                >详情</el-button>
                <el-button
                  type="text"
                  size="mini"
                  @click="openEdit(scope.row)"
                >编辑</el-button>
                <el-button
                  type="text"
                  size="mini"
                  style="color:#F56C6C;"
                  @click="openDelete(scope.row)"
                >删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <pagination
          :total="total"
          :page.sync="queryParams.pageNo"
          :limit.sync="queryParams.pageSize"
          @pagination="getData"
        />
      </div>
      <addOrEditDate ref="addOrEditDate" @getData="getData" />
    </div>
    <detailPage v-show="isDetail" ref="detailPage" @goback="goback" />
  </div>
</template>
<script>
import addOrEditDate from './components/addOrEditDate'
import detailPage from './components/detail'
import ClassifyTreeSelect from '@/components/classifyTree/classifyTreeSelect.vue'
import { queryByCondition, deleteById } from '@/api/cadreBusiness/feeAmountManagement'
export default {
  components: {
    addOrEditDate,
    detailPage,
    ClassifyTreeSelect
  },
  data () {
    return {
      queryParams: {
        pageNo: 1,
        pageSize: 10,
        partyOrgId: '',
        year: '',
        startMonth: '',
        endMonth: ''
      },
      total: 0,
      tableData: [],
      monthList: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
      isDetail: false
    }
  },
  mounted () {
    this.getData()
  },
  methods: {
    getData () {
      queryByCondition(this.queryParams).then((res) => {
        this.tableData = res?.data?.records || []
        this.total = res?.data?.total || 0
      })
    },
    search () {
      this.queryParams.pageNo = 1
      this.getData()
    },
    reset () {
      this.queryParams.partyOrgId = ''
      this.queryParams.year = ''
      this.queryParams.startMonth = ''
      this.queryParams.endMonth = ''
      this.search()
    },
    openAdd () {
      this.$refs.addOrEditDate.open({})
    },
    openEdit (row) {
      this.$refs.addOrEditDate.open(row)
    },
    openDelete (row) {
      this.$confirm('是否确认删除?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteById({ id: row.id }).then((res) => {
          this.$message.success('删除成功')
          this.getData()
        })
      })
    },
    getBranchNode (node) {
      this.queryParams.partyOrgId = node?.id || null
      // this.queryParams.partyOrgName = node?.fullNamePartyOrg || null
    },
    getBranchId (id) {
      // console.log('id', id)
    },
    openDetail (row) {
      this.isDetail = true
      this.$refs.detailPage.init(row)
    },
    goback () {
      this.isDetail = false
    }
  }
}
</script>
<style scoped lang="scss">
.page-index {
  padding-top: 24px;
  .page-search {
    padding-left: 16px;
    padding-right: 16px;
    display: flex;
    justify-content: space-between;
  }
  .page-body{
    .table-box {
      height: calc(100vh - 230px);
    }
  }
}
</style>
